<template>
	<div>
		<Row>
			<i-Col :span="6">
				<Input v-model="searchKeys" placeholder="搜索" style="width: 250px">
					<span slot="prepend">关键字</span>
				</Input>
			</i-Col>
			<i-Col :span="6">
				<Button type="primary" @click="seachBtn" style="margin-right:10px;">
					搜索
				</Button>
				<Button @click="resetBtn">重置</Button>
			</i-Col>
			<i-Col :span="3" :push="9">
				<Button type="primary" @click="JurisdictionAdd">
					新增权限组
				</Button>
			</i-Col>
		</Row>

		<Table border :columns="columns1" :data="JurisdictionList">
			<template slot="create_time" slot-scope="{ row }">
				{{ row.create_time | dateFormat }}
			</template>
		</Table>

		<Page
			:total="pageInfo.count"
			:current="pageInfo.page"
			:page-size="pageInfo.defaultPageSize"
			:page-size-opts="pageInfo.pageSizeArr"
			class="Page"
			show-elevator
			@on-change="pageChage"
			@on-page-size-change="sizeChage"
			show-sizer
			show-total
		/>

		<!--权限添加-->
		<Modal
			width="600px"
			@on-visible-change="modalChange"
			v-model="addRights"
			:title="modalTitle + '权限组'"
		>
			<div class="modal-form">
				<i-Form
					ref="JurisdictionListRef"
					:rules="JurisdictionListRules"
					:model="formData"
				>
					<FormItem label="用户名" prop="name">
						<Input v-model="formData.name"></Input>
					</FormItem>

					<FormItem label="分配权限">
						<br />
						<el-tree
							:data="treeData"
							:props="rightProps"
							node-key="id"
							show-checkbox
							default-checked-keys
							:default-checked-keys="defKeys"
							ref="rightsTreeRef"
							empty-text="加载中..."
						></el-tree>
					</FormItem>
				</i-Form>
			</div>
			<div slot="footer">
				<Button type="text" size="large" @click="addCancel">取消</Button>
				<Button type="primary" size="large" @click="addOk">确定</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 搜索关键字
			searchKeys: '',
			// 对话框title
			modalTitle: '创建',
			// 控制添加权限对话框的显示与隐藏
			addRights: false,
			// 控制编辑权限对话框的显示与隐藏
			editRights: false,
			// // 权限列表数据
			JurisdictionList: [],
			// 权限树参数
			rightProps: {
				children: 'children',
				label: 'name'
			},
			// 权限树默认节点
			defKeys: [],
			// 表格列数据
			columns1: [
				{
					width: 60,
					align: 'center',
					title: '编号',
					key: 'id'
				},
				{
					title: '权限组名',
					key: 'name'
				},

				{
					title: '创建日期',
					slot: 'create_time',
					sortable: true
				},
				{
					title: '操作',
					width: 180,
					render: (h, params) => {
						return h('ButtonGroup', [
							h(
								'Button',
								{
									props: {
										type: 'primary',
										ghost: 'ghost',
										size: 'small'
									},
									on: {
										click: () => {
											this.show(params.row.id)
										}
									}
								},
								'编辑'
							),
							h(
								'Button',
								{
									props: {
										type: 'error',
										ghost: 'ghost',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params)
										}
									}
								},
								'删除'
							)
						])
					}
				}
			],
			// 添加权限数据
			formData: {
				id: '',
				name: '',
				permissions: []
			},
			// 编辑权限数据
			editFormData: {
				name: '',
				rightsTree: []
			},
			// 添加权限的表单验证
			JurisdictionListRules: {
				name: [
					{
						required: true,
						message: '权限组名不能为空',
						trigger: 'blur'
					}
				]
			},
			// 编辑权限的表单验证
			JurisdictionListEditRules: {
				name: [
					{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}
				]
			},
			// 添加的数据数组
			formAddRights: [
				{
					title: '',
					permissions: ''
				}
			],
			// 添加权限树形列表
			treeData: [],
			data3: []
		}
	},
	created() {
		// 获取权限列表数据
		this.Jurisdiction()
		this.getRightsTree()
	},
	methods: {
		// 获取权限列表数据
		async Jurisdiction() {
			const { data: res } = await this.$http.permissions(
				this.getQueryParams({ title: this.searchKeys })
			)
			this.JurisdictionList = res.list
			this.pageInfo.count = res.counts
		},
		// 渲染tree结构
		async getRightsTree() {
			const { data: res } = await this.$http.permissionsOK()
			this.treeData = res
		},
		// 添加权限组对话框
		JurisdictionAdd() {
			this.modalTitle = '创建'
			this.addRights = true
		},
		// 编辑权限列表
		async show(id) {
			this.modalTitle = '编辑'
			this.addRights = true
			const { data: res } = await this.$http.permissionsInfo(id)
			this.defKeys = res.permissions
			this.formData.name = res.name
			this.formData.id = res.id
		},
		// 删除列表
		remove(params) {
			this.$Modal.confirm({
				title: '警告',
				content: '你确定要删除吗？',
				onOk: async () => {
					const { data: res } = await this.$http.permissionsDelete(params.row.id)
					// this.JurisdictionList.splice(params.index, 1)
					this.Jurisdiction()
				},
				onCancel: index => {
					this.$Message.info('已取消删除')
				}
			})
		},
		// 点击添加 关闭添加对话框
		async addOk() {
			this.formData.permissions = [
				...this.$refs.rightsTreeRef.getCheckedKeys(),
				...this.$refs.rightsTreeRef.getHalfCheckedKeys()
			]
			if (this.formData.permissions == false)
				return this.$Message.error('权限不能为空')
			this.$refs.JurisdictionListRef.validate(async val => {
				if (!val) return this.$Message.error('请填写权限组名')
				if (this.formData.id) {
					console.log('修改')
					const { data: res } = await this.$http.permissionsEdit(this.formData)
					this.$Message.success('修改权限组成功')
				} else {
					console.log('新增')
					const { data: res } = await this.$http.permissionsAdd(this.formData)
					if (!res.success) return
					this.$Message.success('添加权限组成功')
				}
				this.addRights = false
				this.Jurisdiction()
			})
		},
		// 对话框变化
		modalChange(val) {
			if (!val) {
				this.$refs.rightsTreeRef.setCheckedNodes([])
				this.$refs.JurisdictionListRef.resetFields()
				this.formData.id = ''
			}
		},
		addCancel() {
			this.addRights = false
		},
		pageChage(newPage) {
			this.pageInfo.page = newPage
			this.Jurisdiction()
		},
		sizeChage(newSize) {
			this.pageInfo.defaultPageSize = newSize
			this.Jurisdiction()
		},
		// 点击按钮 搜索
		seachBtn() {
			this.Jurisdiction()
		},
		// 重置
		resetBtn() {
			this.searchKeys = ''
			this.Jurisdiction()
		}
	}
}
</script>
<style lang="less" scoped>
.ivu-row {
	margin-bottom: 15px;
}
.Page {
	margin-top: 20px;
	text-align: right;
}
.modal-form {
	width: 300px;
	margin: 0 auto;
}
</style>